.side-bar {
  box-shadow: 0 0 10px #CCCCCC;
  .main-logo {
    width: 32px;
    aspect-ratio: 1;
    display: grid;
    grid: 50%/50%;
    color: var(--td-brand-color-5);
    --_g: no-repeat linear-gradient(currentColor 0 0);
    background: var(--_g),var(--_g),var(--_g);
    background-size: 50.1% 50.1%;
    animation:
      flipping1-1   1.5s infinite steps(1) alternate,
      flipping1-2 3s   infinite steps(1);
    &::before {
      content: "";
      background: currentColor;
      transform: perspective(150px) rotateY(0deg) rotateX(0deg);
      transform-origin: bottom right;
      animation: flipping1-3 1.5s infinite linear alternate;
    }
    @keyframes flipping1-1 {
      0%  {background-position: 0    100%,100% 100%,100% 0}
      33% {background-position: 100% 100%,100% 100%,100% 0}
      66% {background-position: 100% 0   ,100% 0   ,100% 0}
    }
    @keyframes flipping1-2 {
      0%  {transform: scaleX(1)  rotate(0deg)}
      50% {transform: scaleX(-1) rotate(-90deg)}
    }
    @keyframes flipping1-3 {
      16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
      33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
      66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
      100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
    }
  }
}

// .side-bar-title {
//   box-shadow: 0 0 5px #AAAAAA;
//   padding: 3px 6px;
//   position: relative;
//   left: 10px;
// }
